
<!DOCTYPE html> 
<html>

<head>

    <meta charset="UTF-8">

    <title>HTML5语义化标签示例</title>

    <style>

        header, nav, main, article, section, aside, footer { border: 1px solid #ccc; margin: 10px; padding: 15px; }

        nav ul { list-style: none; padding: 0; }

        nav li { display: inline; margin-right: 20px; }

    </style>

</head>

<body>

    <header> 

        <h1>网站名称或Logo</h1>

        <p>网站副标题或简介</p>

    </header>

    <nav>

        <ul>

            <li><a href="#home">首页</a></li>

            <li><a href="#news">文章</a></li>

            <li><a href="#about">关于我们</a></li>

        </ul>

    </nav>

    <main> 

        

        <article>

            <header>

                <h2>一篇关于语义化标签的文章</h2>

                <p>发布日期: <time datetime="2025-9-27">2025年9月27日</time></p>

            </header>

            <section> 

                <h3>什么是语义化标签？</h3>

                <p>语义化标签是指...</p>

                <figure> 

                    <img src="semantic-html.jpg" alt="HTML5语义化结构图解">

                    <figcaption>图1: HTML5文档结构示例</figcaption> 

                </figure>

            </section>

            <section>

                <h3>为什么使用语义化标签？</h3>

                <p>使用它们的好处是...</p>

            </section>

            <footer>

                <p>文章标签: <mark>HTML5</mark>, <mark>Semantic Web</mark></p>

            </footer>

        </article>

    </main>

    <aside> 

        <h3>相关推荐</h3>

        <ul>

            <li><a href="#">链接一</a></li>

            <li><a href="#">链接二</a></li>

        </ul>

    </aside>

    <footer> 

        <p>© 2025 XX网站. 保留所有权利.</p>

        <address>联系我们: <a href="mailto:contact@example.com">contact@example.com</a></address>

    </footer>

</body>

</html>